<template>
  <!-- 页面-应用管理 -->
  <div class="EmployeeOpenCard-page innerPageTable-out-flex">
    <!-- 搜索区域 -->
    <SelfAdaption v-if="!useTableSearchBar">
      <Form :model="formSearch" ref="roleFormSearch" slot="adaption-bar" class="ivu-form-no-margin-bottom" inline>
          <Form-item prop="tenantCode" label="租户编码">
            <Input type="text" v-model.trim="formSearch.tenantCode" :maxlength="30" @on-enter="search" />
          </Form-item>

          <Form-item prop="crCode" label="业务单元">
            <Input type="text" v-model.trim="formSearch.crCode" :maxlength="30" @on-enter="search" />
          </Form-item>
          <Form-item prop="ecsbLogId" label="日志id">
            <Input type="text" v-model.trim="formSearch.ecsbLogId"  @on-enter="search" />
          </Form-item>

          <Form-item prop="errorMessage" label="异常信息">
            <Input type="text" v-model.trim="formSearch.errorMessage"  @on-enter="search" />
          </Form-item>

          <Form-item prop="outTravelApplyNo" label="外部差旅单号">
            <Input type="text" v-model.trim="formSearch.outTravelApplyNo"  @on-enter="search" />
          </Form-item>

          <Form-item prop="createUser" label="创建人">
            <Input type="text" v-model.trim="formSearch.createUser" :maxlength="30" @on-enter="search" />
          </Form-item>

          <Form-item prop="status" label="差旅单状态">
            <Select
              placeholder="选择差旅单状态"
              v-model="formSearch.status"
              :transfer="true"
              class="no-borderColor"
              clearable
            >
              <Option value= 1 key="1"> 通过 </Option>
              <Option value= 2  key="2"> 作废 </Option>
            </Select>
          </Form-item>

          <Form-item prop="travelApplyType" label="差旅类型">
            <Select
              placeholder="选择差旅类型"
              v-model="formSearch.travelApplyType"
              :transfer="true"
              class="no-borderColor"
              clearable
            >
              <Option value= 1 key="1"> 普通差旅 </Option>
              <Option value= 2  key="2"> 福利差旅 </Option>
            </Select>
          </Form-item>

          <Form-item prop="operationType" label="操作类型">
            <Select
              placeholder="选择操作类型"
              v-model="formSearch.operationType"
              :transfer="true"
              class="no-borderColor"
              clearable
            >
              <Option value="1" key="1"> 新增 </Option>
              <Option value= "2"  key="2"> 更新 </Option>
            </Select>
          </Form-item>

          <Form-item prop="isSuccess" label="是否成功">
            <Select
              placeholder="选择是否成功"
              v-model="formSearch.isSuccess"
              :transfer="true"
              class="no-borderColor"
              clearable
            >
              <Option value="Y" key="Y"> 成功 </Option>
              <Option value= "N"  key="N"> 失败 </Option>
            </Select>
          </Form-item>

          <!-- 查询\重置按钮 -->
          <Form-item prop="button" class="search-solt-btn">
            <RPButton optType="search" @click="search" />
            <RPButton optType="reset" @click="formReset" />
          </Form-item>
      </Form>
    </SelfAdaption>

    <!-- <div slot="table-bar">
      <RPButton optType="create" class="template-btn"  text="导出为Excel文件" @click="onExport" />
    </div> -->

    <InnerPageTable ref="appTable" :config="tableConfig"></InnerPageTable>
  </div>
</template>
<script>
import userCenter from '@/api/user.center.mixin'
import locales from './locales.js'
const COLUMN_WIDTH = window.RPConfig.COLUMN_WIDTH
export default {
  name: 'application-list',
  mixins: [userCenter, locales],
  data() {
    return {
      useTableSearchBar: false,
      formSearch: {
        tenantCode:'',
        crCode:'',
        ecsbLogId:'',
        errorMessage:"",
        outTravelApplyNo:"",
        createUser:"",
        status:"",
        travelApplyType:"",
        operationType:"",
        isSuccess:""
      }
    }
  },
  
  computed: {
    tableConfig() {
      return { 
        loadDataFn: this.getPushLogList,
        columnsFn: this.generateColumns,
        autoFirst: true
      }
    }
  },

  methods: {
    //获取列表数据
    getPushLogList({ responseProcess, param }) {
     return $http.post(this.concaturl_opencard('queryOrderSyncLogPage'), param).then(res => {
        res.data.data.pageNum = res.data.data.current;
        responseProcess(res.data.data)
      })
    },

    // 拼接接口地址
    concaturl_opencard(url) {
      return window.RPConfig.mgt.concat(`/syncOrder/${url}`);
    },

    search(page = 1) {
      let searchParams = Object.assign({}, this.formSearch)
      Object.keys(searchParams).map(item=>{
        searchParams[item] == '' ? searchParams[item] = null:'';
      })
      this.$refs['appTable'].load(searchParams, page)
    },

    formReset() {
      this.$refs['roleFormSearch'].resetFields()
      this.search()
    },

    //导出
    onExport(){
      let searchParams = Object.assign({}, this.formSearch)
      Object.keys(searchParams).map(item=>{
        searchParams[item] == '' ? searchParams[item] = null:'';
      })
      $http.post(this.concaturl_opencard('exportLogquery'),searchParams,null,{ responseType: "blob" })
        .then(response => {
          const fileInfo = response.headers["content-disposition"].split(";")[1];
          let fileName = decodeURIComponent(fileInfo && fileInfo.split("=")["1"]);
          let blob = new Blob([response.data]);
          let href = window.URL.createObjectURL(blob); //创建下载的链接
          if (window.navigator.msSaveBlob) {
            try {
              window.navigator.msSaveBlob(blob, fileName);
            } catch (e) {
              console.error(e);
            }
          } else {
            // 谷歌浏览器 创建a标签 添加download属性下载
            let downloadElement = document.createElement("a");
            downloadElement.href = href;
            downloadElement.target = "_blank";
            downloadElement.download = fileName; //下载后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); //点击下载
            document.body.removeChild(downloadElement); //下载完成移除元素
            window.URL.revokeObjectURL(href); //释放掉blob对象
          }
      });
    },

    generateColumns() {
      return [
        {
          title: '租户编码',
          align: 'center', 
          width: 110,
          key: "tenantCode"
        },
        {
          title: '业务单元',
          align: 'center', 
          width: 110,
          key: "crCode"
        },
        {
          title: '外部差旅单号',
          align: 'center', 
          width: 110,
          key: "outTravelApplyNo"
        },
        {
          title: '差旅单状态',
          align: 'center',
          width: 110,
          render: (h, params) => {
            let v = params.row.status;
            let label = v == null? '未知':v == 1? '通过':'作废';
            return h('span', label);
          }
        },
        {
          title: '差旅类型',
          align: 'center',
          width: 110,
          render: (h, params) => {
            let v = params.row.travelApplyType;
            let label = v == null? '未知':v == 1? '普通差旅':'福利差旅';
            return h('span', label);
          }
        },
        {
          title: '操作类型',
          align: 'center',
          width: 110,
          render: (h, params) => {
            let v = params.row.operationType;
            let label = v == null? '未知':v == '1'? '新增':'更新';
            return h('span', label);
          }
        },
        {
          title: '是否成功',
          align: 'center',
          width: 110,
          render: (h, params) => {
            let v = params.row.isSuccess;
            let label = v == null? '未知':v == 'Y'? '成功':'失败';
            return h('span', label);
          }
        },
        {
          title: '原始报文',
          align: 'center',
          width: 110,
          key: "rawMessage"
        },
        {
          title: '异常信息',
          align: 'center',
          width: 110,
          key: "errorMessage"
        },
        {
          title: 'ssdp请求日志id',
          align: 'center',
          width: 170,
          key: "ecsbLogId"
        },
        {
          title: '创建人',
          align: 'center',
          width: 110,
          key: "createUser"
        },
        {
          title: '创建时间',
          align: 'center',
          width: 150,
          key: "createTime"
        },
        {
          title: '更新时间',
          align: 'center',
          width: 150,
          key: "updateTime"
        },
        {
          title: '更新人',
          align: 'center',
          width: 110,
          key: "updateUser"
        }
      ]
    }
  }
}
</script>
<style lang="less">
// ok注释的样式
.EmployeeOpenCard-page {
  .ivu-form-item {
    .ivu-form-item-label {
      line-height: 14px !important;
    }
  }
}
</style>
<style lang="less">
// .ApplicationList-page {
//   .core-modal {
//     width: 774px!important;
//   }
// }
</style>
